<%@ page language="java" contentType="text/html; charset=UTF-8"
	trimDirectiveWhitespaces="true" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include.inc.jsp"%>


<link rel="stylesheet" type="text/css" href="${contextPath}/css/bootstrap-datetimepicker.css">
<script src="${contextPath}/js/main.js" type="text/javascript"></script>

<script src="${contextPath}/js/DropDownList.js"></script>
<script src="${contextPath}/js/bootstrap-datetimepicker.js"></script>
<script src="${contextPath}/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script>
	var page;
	var querying;
	$(function () {
		initDropDownList($("#search_EQ_sendStatus"), sendStatusArr);
		initDropDownList($("#search_EQ_masNum"), masNumArr);
		initDropDownList($("#search_EQ_captainStatus"), captainStatusArr);
//		$(".date").datetimepicker({minView: 2, todayBtn: true, todayHighlight: true, language: 'zh',autoclose:true});
		$(".date").on('focus',function(){
			WdatePicker();
		});
		$(".search").click(function(){
			page = undefined;
			$(".content-body").scrollTop(0);
			loadWindInfo();
		}).trigger('click');

		$(".content-body").scroll(function () {
			var height = this.scrollHeight;
			var top = this.scrollTop;
			var clientHeight = this.clientHeight;
			if (height <= (top + clientHeight + 5) && height != clientHeight && !querying) {
				loadWindInfo();
			}
		});

		$(".query-condition input").on('keypress', function () {
			if (event.keyCode == 13) {
				$(".search").trigger('click');
			};
		})
	});
	function initDropDownList(obj, arr) {
		var items = [];
		items.push({ItemText: "请选择", ItemData: '', Selected: true});
		$.each(arr, function (index, item) {
			items.push({ItemText: item.text, ItemData: item.value});
		});
		$(obj).DropDownList({
			InputName: $(obj).attr("id"),
			ButtonText: "",
			onSelect: function (I, Data) {
				$("[name="+I+"]").val(Data);
			},
			Items: items
		})
	}

	function loadWindInfo() {
		var params = $("#searchWidForm").serialize();
		if (page) {
			params += '&pageNum=' + (page.pageNum+1);
			if(page.pageNum == page.nextPage){
				return;
			}
		}
		$('.loading').show();
		if($(".content-body").scrollTop()>0){
			$(".content-body").scrollTop($(".content-body").scrollTop()+50);
		}
		querying = true;
		$.get('${contextPath}/query/windInfo/load', params, function (data) {
			var tbody = $("#wind-table tbody");
			if (tbody.length == 0)return;

			if (!page) {
				tbody.empty();
			}
			$("#totalCount").text(data.page.totalCount);
			page = data.page;
			$.each(data.cptSends, function (index, item) {
				var tr = $("<tr></tr>");
				tr.append($("<td></td>").html(item.flightId));
				tr.append($("<td></td>").html(item.aircraftId));
				tr.append($("<td></td>").html(item.dep));
				tr.append($("<td></td>").html(item.arr));

				var format = 'yyyy-MM-dd hh:mm';
				if (item.sendDate) {
					tr.append($("<td></td>").html(new Date(item.sendDate).Format(format)));
				} else {
					tr.append($("<td></td>").html('&nbsp;'));
				}

				var status, statusArr;
				if (item.captainStatus!='0' && item.captainStatus != '') {
					status = item.captainStatus;
					statusArr = captainStatusArr;
				} else if (item.masNum && item.masNum != '') {
					status = item.masNum;
					statusArr = masNumArr;
				} else {
					status = item.sendStatus;
					statusArr = sendStatusArr;
				}
				tr.append(getStatusTd(status,statusArr));
//				tr.append(getStatusTd(item.sendStatus,sendStatusArr));
//				tr.append(getStatusTd(item.masNum,masNumArr));
//				tr.append(getStatusTd(item.captainStatus,captainStatusArr));

				//报文信息
				var sendContent = item.sendContent;
				if (item.sendContent != null && sendContent.length > 85) {
					sendContent = item.sendContent.substr(0, 85) + '...';
				}
				tr.append($("<td></td>").html(sendContent).attr("title", item.sendContent));

				tbody.append(tr);
			});
			$("#curCount").text(tbody.find('tr').length);
			setTargetTableColumnWidth($("#wind-fix-head"), $("#wind-table"));

			querying = false;

			$('.loading').hide();
		}, 'json');
	}

	function getStatusTd(status,statusArr){
		var statusTxt = '&nbsp;', statusCss = '';
		if(status != 0 && status !=''){
			for (var i = 0; i < statusArr.length; i++) {
				if (status.endsWith(statusArr[i].value)) {
					statusTxt = statusArr[i].text;
					statusCss = statusArr[i].cls;
					break;
				}
			}
		}

		var statusTd = $("<td></td>").addClass("status-td");
		var statusDiv = $("<div></div>").html(statusTxt).addClass(statusCss);
		statusTd.append(statusDiv);

		return statusTd;
	}
</script>

<div class="container">
	<form id="searchWidForm">
		<div class="query-condition">
			<table border="0">
				<tr>
					<td width="110">
						<label>机尾号：</label>
					</td>
					<td width="160">
						<input type="text" class="form-control" name="search_LIKE_aircraftId"
							   value="${param.search_LIKE_aircraftId}"/>
					</td>
					<td width="110">
						<label>航班号：</label>
					</td>
					<td width="160">
						<input type="text" class="form-control" name="search_LIKE_flightId"
							   value="${param.search_LIKE_flightId}"/>
					</td>
					<td width="110">
						<label>发送起始时间：</label>
					</td>
					<td>
						<input type="text"
							   name="search_GTE_sendDate"
							   class="date form-control"
							   data-date-format="yyyy-mm-dd"
							   value="${param.search_GTE_sendDate}"/>
					</td>
					<td width="110">
						<label>发送结束时间：</label>
					</td>
					<td>
						<input type="text"
							   name="search_LTE_sendDate"
							   class="date form-control"
							   data-date-format="yyyy-mm-dd"
							   value="${param.search_LTE_sendDate}"/>
					</td>
				</tr>
				<tr>
					<td>
						<label>发送状态：</label>
					</td>
					<td>
						<div class="dropdownlist" id="search_EQ_sendStatus">
						</div>
					</td>
					<td>
						<label>MAS接收状态：</label>
					</td>
					<td>
						<div class="dropdownlist" id="search_EQ_masNum">
						</div>
					</td>
					<td>
						<label>FMC接收状态：</label>
					</td>
					<td>
						<div class="dropdownlist" id="search_EQ_captainStatus">
						</div>
					</td>
					<td>
					</td>
					<td>
						<div class="pull-right">
							<button class="btn btn-primary search" type="button">查询</button>
						</div>
					</td>
				</tr>
			</table>
		</div>
	</form>
	<div class="main-body-center" style="width: 100%">
		<div class="panel-title">
			<b>风温报文</b>
			<label class="gray">&nbsp;|&nbsp;</label>
			<span id="curCount" class="green">0</span>
			<span class="gray">/</span>
			<span id="totalCount" class="gray">0</span>
		</div>
		<table id="wind-fix-head" class="table-bordered-simple fix-head">
			<thead>
			<tr>
				<th width="60">航班号</th>
				<th width="60">机尾号</th>
				<th width="65">起飞机场</th>
				<th width="65">降落机场</th>
				<th width="105">发送时间</th>
				<th width="100">风温报文状态</th>
				<th width="auto">报文</th>
			</tr>
			</thead>
		</table>

		<div class="content-body">
			<table id="wind-table" class="table-bordered-simple">
				<tbody>
				</tbody>
			</table>
			<div class="loading">loading...</div>
		</div>
	</div>
</div>